<template>
	<view class="search-flower" :style="{height:screenHeight+'px'}">
		<uni-search-bar v-model="searchValue" placeholder="请输入关键字" :radius="100" @confirm="search" @clear="clear">
		</uni-search-bar>
		<view class="history">
			<view class="history_content">
				<view class="history_head">
					<text class="shu">|</text><text class="wenzi">搜索发现</text>
				</view>
				<view class="history_info">
					<uni-tag class="history_info_text" v-for="(item,index) in textList" :key="index" :ref='index'
						@click="bindClick(index)" :text="item" circle type="warning">
					</uni-tag>
				</view>
			</view>
		</view>
		<!-- 展示 -->
		<view class="grid">
			<view v-for="item in list" :key="item.id" class="gridItem">
				<image @load="load" :src="item.cover_img" mode="" @click="handleToDetail(item)"></image>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				searchValue: "玫瑰",
				textList: ['向日葵', '满天星', '玫瑰', '康乃馨', '牡丹'],
				screenHeight: 0,
				list:[]
			}
		},
		components: {
		},
		onLoad() {
			this.getscreenHeight()
			this.search()
		},
		methods: {
			getscreenHeight() {
				let res = uni.getSystemInfoSync()
				// this.screenHeight = res.screenHeight - res.windowTop - res.statusBarHeight - res.windowBottom
				this.screenHeight = res.windowHeight
				// console.log(res)
			},
			search() {
				uni.$http.get(`/product-server/api/product/v1/search?text=${this.searchValue}`).then(res => {
					console.log(res)
					this.list=this.getRandomArrayElements(res.data.data,res.data.data.length)
				})
			},
			getRandomArrayElements(arr, count) {
			    var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
			    while (i-- > min) {
			        index = Math.floor((i + 1) * Math.random());
			        temp = shuffled[index];
			        shuffled[index] = shuffled[i];
			        shuffled[i] = temp;
			    }
			    return shuffled.slice(min);
			},
			handleToDetail(item){
				uni.navigateTo({
					url:`../detail/detail?id=${item.id}`
				})
			},
			load(){
			},
			bindClick(i) {
				this.searchValue = this.$refs[i][0].text
			},
			// #ifdef APP-PLUS

			// #endif
			clear() {
				// console.log(this.searchValue)
			}
		},

	}
</script>

<style scoped>
	.search-flower {
		/*  #ifdef  MP-WEIXIN  */
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		/*  #endif  */

		/* background-color: #FFFFFF; */
		background-image: linear-gradient(41deg, #FFFFFF 0%, #ff557f 50%, #c44163 100%);
	}

	.history {
		box-sizing: border-box;
		width: 100%;
		padding: 20rpx;
	}

	.history_content {
		height: 300rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		padding: 10rpx;
	}

	.history_head {
		box-sizing: border-box;
		height: 50rpx;
		line-height: 50rpx;
	}

	.shu {
		font-size: 50rpx;
		font-weight: bold;
		color: #07C160;
	}

	.wenzi {
		letter-spacing: 3rpx;
		font-weight: 700;
		margin-left: 10rpx;
	}

	.history_info {
		margin-top: 50rpx;
	}

	.history_info_text {
		display: inline-block;
		margin-right: 10rpx;
		margin-bottom: 20rpx;
	}
	.grid {
	    display: grid;
	    grid-template-columns: repeat(3, 1fr);
	    grid-gap: 10px;
		padding: 20rpx;
	}
	.gridItem{
		width: 100%;
		height: 200rpx;
		border-radius: 10rpx;
	}
	.gridItem image{
		width: 100%;
		border-radius: 14rpx;
		height: 100%;
	}
	/* uni-grid-item{
		padding: 10px;
	}
	image{
		width: 100%;
		height: 100%;
	} */
</style>
